<template>
    <div
      class="tree-node-wrap"
      :class="{ clickable: isTertiary }"
      :style="level === 1 ? 'margin: 0 300px;' : ''"
      @click="handleClick"
    >
      <div class="tree-node-bubble">
        <span class="icon">{{ getIcon(node.path) }}</span>
        <div class="title">{{ props.getName(node.path) }}</div>
        <div class="info">
          <div>任务数：{{ node.totalBadges }}</div>
          <div>平均等级：{{ node.avgLevel !== undefined && node.avgLevel !== -1 ? node.avgLevel.toFixed(1) : '-' }}</div>
          <div>最高等级：{{ node.maxLevel ?? '-' }}</div>
        </div>
      </div>
      <div v-if="hasChildren" class="vertical-line"></div>
      <div
        class="tree-children"
        :class="`level-${level}`"
        v-if="hasChildren"
      >
        <div class="horizontal-line"></div>
        <SkillTreeNode
          v-for="(child, key) in node.subNodes"
          :key="key"
          :node="child"
          :level="level + 1"
          :getName="props.getName"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  const props = defineProps({ node: Object, level: Number, getName: Function })
  const hasChildren = computed(() => props.node.subNodes && Object.keys(props.node.subNodes).length > 0)
  const isTertiary = computed(() => props.node.path && props.node.path.length === 6)
  const route = useRoute()
  const router = useRouter()

  function getIcon(path) {
    if (props.level === 0) return '🧠'
    if (path.startsWith('00')) return '💻'
    if (path.startsWith('01')) return '🤖'
    return '🧩'
  }

  function getName(path) {
    if (props.level === 0) return '大脑'
    return props.getName(path)
  }

  function handleClick() {
    // 只允许三级节点跳转
    if (isTertiary.value) {
      const uid = route.query.uid
      const code = props.node.path
      router.push(`/association?uid=${uid}&code=${code}`)
    }
  }
  </script>
  
  <style scoped>
  .tree-node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .tree-node-bubble {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 40%, #6cf, #36a 80%);
    box-shadow: 0 0 20px #36a8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 28px;
    z-index: 1;
  }
  .icon { font-size: 28px; }
  .title { font-size: 14px; margin-top: 4px; }
  .info {
    font-size: 11px;
    color: #aef;
    margin-top: 4px;
    text-align: center;
  }
  .vertical-line {
    width: 2px;
    height: 48px;
    background: linear-gradient(to bottom, #36a, #6cf);
    margin: 0 auto;
  }
  .tree-children {
    display: flex;
    margin-top: 0;
    position: relative;
    align-items: flex-start;
    justify-content: center;
  }
  .tree-children.level-1 { gap: 240px; }
  .tree-children.level-2 { gap: 120px; }
  .tree-children.level-3, .tree-children.level-4, .tree-children.level-5 { gap: 60px; }
  .horizontal-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #36a, #6cf);
    z-index: 0;
    width: 100%;
    margin-top: -1px;
  }
  .skill-tree-root {
    position: relative;
    padding: 60px 0;
    display: flex;
    justify-content: flex-start;
    min-width: 100vw;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
  }
  .skill-tree-bg {
    background: #0a1833;
    min-height: 100vh;
    position: relative;
    overflow-x: auto;
  }
  .skill-tree-root::-webkit-scrollbar {
    height: 8px;
    background: #1a2a44;
  }
  .skill-tree-root::-webkit-scrollbar-thumb {
    background: #36a;
    border-radius: 4px;
  }
  .tree-node-wrap.clickable .tree-node-bubble {
    cursor: pointer;
    box-shadow: 0 0 24px #36a8, 0 0 0 2px #fff3 inset;
    transition: box-shadow 0.2s;
  }
  .tree-node-wrap.clickable .tree-node-bubble:hover {
    box-shadow: 0 0 32px #36a, 0 0 0 4px #fff6 inset;
    filter: brightness(1.1);
  }
  </style>